<template>
  <div class="min-h-screen bg-gradient-to-br from-slate-900 via-gray-900 to-black flex items-center justify-center py-6">
    <!-- 背景装饰 -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
      <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-yellow-500/10 rounded-full blur-3xl animate-pulse"></div>
      <div
        class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-orange-500/10 rounded-full blur-3xl animate-pulse"
        style="animation-delay: 1s"
      ></div>
    </div>

    <!-- 主内容 -->
    <div class="relative z-10 max-w-2xl mx-auto text-center">
      <!-- 图标区域 -->
      <div class="mb-8 relative">
        <div
          class="w-32 h-32 mx-auto bg-white/5 backdrop-blur-lg border border-white/10 rounded-3xl flex items-center justify-center mb-6 animate-float"
        >
          <Logo :show-text="false" :turn="false" class="scale-150" />
        </div>
        <!-- 发光效果 -->
        <div
          class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-40 h-40 bg-yellow-500/20 rounded-full blur-2xl -z-10"
        ></div>
      </div>

      <!-- 标题 -->
      <h1
        class="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-yellow-400 via-orange-500 to-amber-600 bg-clip-text text-transparent"
      >
        即将上线
      </h1>

      <!-- 副标题 -->
      <div class="bg-white/5 backdrop-blur-lg border border-white/10 rounded-2xl p-8 mb-8">
        <p class="text-2xl text-white mb-4 font-semibold">篮球数据分析功能</p>
        <p class="text-lg text-white/70 leading-relaxed">我们正在努力开发中，敬请期待</p>
      </div>

      <!-- 特性预告 -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
        <div class="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-4">
          <div class="w-10 h-10 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-lg flex items-center justify-center mb-3 mx-auto">
            <span class="text-xl">📊</span>
          </div>
          <p class="text-sm text-white/70">数据分析</p>
        </div>
        <div class="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-4">
          <div class="w-10 h-10 bg-gradient-to-r from-orange-500 to-amber-500 rounded-lg flex items-center justify-center mb-3 mx-auto">
            <span class="text-xl">🤖</span>
          </div>
          <p class="text-sm text-white/70">AI分析</p>
        </div>
        <div class="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-4">
          <div class="w-10 h-10 bg-gradient-to-r from-amber-500 to-yellow-500 rounded-lg flex items-center justify-center mb-3 mx-auto">
            <span class="text-xl">⭐</span>
          </div>
          <p class="text-sm text-white/70">实时更新</p>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <button
          @click="goHome"
          class="px-8 py-3 bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-400 hover:to-orange-400 text-white font-semibold rounded-full transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-yellow-500/50"
        >
          返回首页
        </button>
        <button
          @click="goFootball"
          class="px-8 py-3 bg-white/10 hover:bg-white/20 backdrop-blur-sm border border-white/20 text-white font-semibold rounded-full transition-all duration-300 hover:scale-105"
        >
          查看足球数据
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// SEO配置
useSEO({
  title: '篮球数据查询 - 即将上线 - 球球助手',
  description: '篮球数据查询功能正在开发中，敬请期待',
  keywords: '篮球数据,篮球查询,数据展示,球球助手',
});

const router = useRouter();

// 返回首页
const goHome = () => {
  router.push('/');
};

// 跳转到足球数据页面
const goFootball = () => {
  router.push('/guess-football');
};
</script>

<style scoped>
/* 浮动动画 */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* 渐变文本 */
.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}
</style>
